<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客制指令</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="应用">
        <input type="text" v-聚焦 placeholder="业面加载后自动聚焦">
        <input type="text" v-防抖:500="输入处理" placeholder="添加防抖功能">
        <input type="text" v-限制长度="5" placeholder="限制长度为5">
        <button v-拖动="">可拖动</button>
    </div>
    <script>
        const 应用 = Vue.createApp({
            data() {
                return {
                    延时: 500,
                    输入值: '',
                }
            },
            methods: {
                输入处理(事件) {
                    this.输入值 = 事件.target.value 
                    console.log('处理输入: ', this.输入值)
                }
            }
        })
        应用.directive('聚焦', {
            mounted(元素) {
                元素.focus()
            }
        })
        应用.directive('防抖', {
            mounted(元素, 绑定) {
                const 延迟 = parseInt(绑定.arg) || 300;
                let 延时识别码;
                元素.addEventListener('input', (参数) => {
                    clearTimeout(延时识别码)
                    延时识别码 = setTimeout(
                        () => {
                            绑定.value(参数)
                        },
                        延迟
                    )
                })
            }
        })
        应用.directive('限制长度', {
            mounted(元素, 绑定) {
                const 最大长度 = parseInt(绑定.value) || 10
                元素.addEventListener('compositionend', () => {
                    const 值 = 元素.value;
                    if(值.length > 最大长度) {
                        元素.value = 值.slice(0, 最大长度)
                        console.warn('超长了')
                    }
                })
            }
        })
        应用.directive('拖动', {
            mounted(元素) {
                元素.style.position = 'absolute'
                元素.style.cursor = 'move'

                let 开始X = 0, 开始Y = 0
                let 初始左 = 0, 初始上 = 0

                const 鼠标按下 = (事件) => {
                    开始X = 事件.clientX
                    开始Y = 事件.clientY
                    初始左 = 元素.offsetLeft
                    初始上 = 元素.offsetTop

                    document.addEventListener('mousemove', 鼠标移动)
                    document.addEventListener('mouseup', 鼠标抬起)
                }

                const 鼠标移动 = (事件) => {
                    const 移动X = 事件.clientX - 开始X
                    const 移动Y = 事件.clientY - 开始Y
                    元素.style.left = 初始左 + 移动X + 'px'
                    元素.style.top = 初始上 + 移动Y + 'px'
                }

                const 鼠标抬起 = () => {
                    document.removeEventListener('mousemove', 鼠标移动)
                    document.removeEventListener('mouseup', 鼠标抬起)
                }

                元素.addEventListener('mousedown', 鼠标按下)
            }
        })
        应用.mount('#应用')
    </script>
</body>
</html>